<template>
  <div class="index" v-loading.fullscreen.lock="fullscreenLoading">
    <!-- 轮播图 -->
    <lunbo></lunbo>
    <!-- 热门产品 -->
    <div class="pupular-Product">
      <pupular-Product></pupular-Product>
    </div>
    <!-- 图片实际应该是请求的 -->
    <div class="adpic">
      <a href="https://www.hupu.com/">
        <img
          src="https://stormsend1.djicdn.com/stormsend/uploads/8193accf66654676425ca7c303d37c77.jpg"
          alt=""
        />
      </a>
      <a href="https://www.hupu.com/">
        <img
          src="https://stormsend1.djicdn.com/stormsend/uploads/09d17ceef4e862a7fa50038c9d81cc6e.png"
          alt=""
        />
      </a>
    </div>
    <!-- product-list组件 显示不同种类的商品
    注意这里 -->
    <showProductList
      :msg="firstProductlist"
      :title="'御 Mavic'"
      :videoPath="'https://stormsend1.djicdn.com/uploads/2ae42d107b30013944df787b8ab113e3.mp4'"
      :canshow="true"
    ></showProductList>
    <showProductList
      :msg="secondProductlist"
      :title="'DJI FPV'"
      :videoPath="'https://stormsend1.djicdn.com/uploads/4743aa1059680139c99a787b8ab113e3.mp4'"
      :canshow="true"
    ></showProductList>
    <showProductList
      :msg="thirdProductlist"
      :title="'灵眸 Osmo'"
      :videoPath="'https://stormsend1.djicdn.com/stormsend/uploads/b9cfc080022b0139d712787b8ab113e3.mp4'"
      :canshow="true"
    ></showProductList>
    <showProductList
      :msg="roninProductlist"
      :title="'如影 Ronin'"
      :videoPath="'https://terra-1-g.djicdn.com/04aa1f9dc1c44090ba9623e96d4e048c/Store_homepage_video/djistore_20201013_1200800.mp4'"
      :canshow="true"
    ></showProductList>
  </div>
</template>

<script>
import lunbo from "@/components/homeComponent/lunbo.vue";
import pupularProduct from "@/components/homeComponent/popularProduct.vue";
import showProductList from "@/components/homeComponent/showProductList.vue";
import { getGoods } from "@/assets/tool/request.js";

export default {
  components: {
    lunbo: lunbo,
    pupularProduct: pupularProduct,
    showProductList: showProductList,
  },
  data() {
    return {
      firstProductlist: {},
      secondProductlist: {},
      thirdProductlist: {},
      roninProductlist: {},
      fullscreenLoading: true,
    };
  },

  methods: {
    getres(goodsId) {
      let res = getGoods({
        page: 1,
        limit: 5,
        project_id: 104,
        classify_id: goodsId,
      });
      return res;
    },
  },
  
  async created() {
    this.firstProductlist = await this.getres(380);
    this.secondProductlist = await this.getres(381);
    this.thirdProductlist = await this.getres(382);
    this.roninProductlist = await this.getres(429);
    this.fullscreenLoading = false
  },
};
</script>

<style lang="scss" scoped>
.pupular-Product {
  margin-top: 40px;
}
.adpic {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin: 10px auto 0;
  a {
    width: 48%;
    img {
      width: 100%;
    }
    &:hover {
      box-shadow: 0px 10px 10px -2px #e4e4e4;
    }
  }
}
</style>